import { lazy } from "react";
import { Suspense } from "react/cjs/react.production.min";
import Home from "../view/Home/Home.jsx";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import R503 from "../view/Home/R503.jsx";
const Login = lazy(() => import("../view/Login"));
const Equipent = lazy(() => import("../view/Home/Equipent.jsx"));
const Order = lazy(() => import("../view/Home/Order.jsx"));
const User = lazy(() => import("../view/Home/User.jsx"));
const Log = lazy(() => import("../view/Home/Log.jsx"));
const Reset = lazy(() => import("../view/Home/Reset.jsx"));

const lazyLoad = (children) => {
  return <Suspense fallback={<>loading....</>}>{children}</Suspense>;
};

function Redirect({ to }) {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  }, []);
  return null;
}
const router = [
  { path: "/login", element: lazyLoad(<Login />) },
  {
    path: "/503",
    element: <R503 />,
    id: 6,
  },
  {
    path: "/",
    element: <Home />,
    children: [
      {
        index: true,
        element: <Redirect to="/equipent" />,
      },
      {
        path: "/equipent",
        element: lazyLoad(<Equipent />),
        id: 1,
      },
      {
        path: "/order",
        element: lazyLoad(<Order />),
        id: 2,
      },
      {
        path: "/user",
        element: lazyLoad(<User />),
        id: 3,
      },
      {
        path: "/log",
        element: lazyLoad(<Log />),
        id: 4,
      },
      {
        path: "/reset",
        element: lazyLoad(<Reset />),
        id: 5,
      },
    ],
  },
];

export default router;
